<template>
  <div class="box">
    <el-form ref="userForm" :model="forms" :rules="userRules" :label-position="labelPosition" label-width="100px">
      <el-form-item prop="serial_num" label="店员编号"><el-input class="form_input" v-model="forms.serial_num"></el-input></el-form-item>
      <el-form-item prop="user_id" label="用户Id">
		  <el-input class="form_input" v-model="forms.user_id"></el-input>
     <!--   <el-autocomplete
          size="medium"
          :disabled="type == 'edit'"
          popper-class="my-autocomplete"
          :value-key="'name'"
          v-model="forms.name"
          :fetch-suggestions="remoteMethod"
          placeholder="请输入内容"
          @select="handleSelect_uid"
        >
          <i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick"></i>
          <template slot-scope="{item}">
            <div class="name">{{ item.name }}</div>
            <span class="addr">用户id:{{ item.id }}</span>
            <span class="addr">联系号码:{{ item.mobile }}</span>
          </template>
        </el-autocomplete> -->
      </el-form-item>
      <el-form-item prop="store_id" label="所属门店">
        <el-select v-model="forms.store_id"><el-option v-for="item in storelist" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select>
      </el-form-item>

   <!--   <el-form-item prop="" label="状态">
        <el-radio-group v-model="forms.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item>
        <el-button @click="addSave" v-if="type == 'add'">确定</el-button>
        <el-button @click="editSave" v-else>确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {saveassistant, getassistantdetail, editassistant, getallStore} from '@/api/shop/store';
import {getuserlist} from '@/api/mall/user';
import {objextend} from '@/utils/index';
export default {
  name: 'Editfreight',
  data() {
    const _this = this;
    return {
      labelPosition: 'left',
      forms: {
        serial_num: '',
        store_id: '',
        user_id: '',
        status: 1,
        // name: ''
      },
      list: [],
      storelist: [],
      userRules: {
        user_id: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入店员用户id'
          }
        ],
        serial_num: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入店员编号'
          }
        ],

        store_id: [
          {
            required: true,
            trigger: 'change',
            message: '请选择门店'
          }
        ]
      }
    };
  },
  props: {
    type: {
      type: String,
      default: 'add'
    },
    id: {
      type: Number,
      default: -2
    }
  },
  watch: {
    id() {
      this.forms = {
        serial_num: '',
        store_id: '',
        user_id: '',
        status: 1
      };

      this.getlist();
      this.getallStore();
    }
  },

  methods: {
    //所有门店
    getallStore() {
      let data = {};
      getallStore(data).then(res => {
        let jsondata = res.msg;
        this.storelist = jsondata;
      });
    },
    //用户列表
    remoteMethod(query, cb) {
      let _this = this;
      if (query !== '') {
        var data = {
          name: query
        };
        getuserlist(1, data).then(res => {
          this.loading = false;
          let jsondata = res.msg;
          let list = jsondata.data;
          if (list.length == 0) {
            _this.$message({
              message: '未找到匹配的用户',
              type: 'warning',
              duration: 5 * 1000
            });
            _this.forms.name = '';
          }
          cb(list);
        });
      } else {
        cb([]);
      }
    },
    //选择用户
    handleSelect_uid(item) {
      this.forms.user_id = item.id;
    },

    handleIconClick(ev) {
      console.log(ev);
    },
    //获取详情
    getlist() {
      if (this.id == -1) {
        return false;
      }
      var data = {
        id: this.id
      };
      getassistantdetail(data).then(res => {
        var jsondata = res.msg;
        this.forms = objextend(this.forms, jsondata);
        this.forms.id = jsondata.id;
        this.forms.update_time = jsondata.update_time;
      });
    },

    addSave() {
      var _this = this;
      this.$refs.userForm.validate(valid => {
        if (valid) {
          let data = _this.forms;
          saveassistant(data).then(res => {
            _this.close();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    editSave() {
      var _this = this;
      this.$refs.userForm.validate(valid => {
        if (valid) {
          let data = _this.forms;

          editassistant(data).then(res => {
            _this.close();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    close() {
      this.forms = {
        serial_num: '',
        store_id: '',
        user_id: '',
        status: 1
      };
      // this.uid=''
      this.$emit('on-close');
    }
  },
  mounted() {
    if (this.id) {
      this.getlist();
    }
    this.getallStore();
  }
};
</script>

<style lang="scss" scoped>
.form_input {
  width: 200px;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .addr {
      font-size: 12px;
      color: #b4b4b4;
      display: block;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
